<template>
  <div class="calendar">
    <div class="canlendar-box">
      <FullCalendar class="fullcalendar" ref="fullCalendar" :options="calendarOptions"/>
    </div>
  </div>
</template>
<script>
import '@fullcalendar/core/vdom' // solves problem with Vite
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import zhCn from '@fullcalendar/core/locales/zh-cn';
// import listPlugin from '@fullcalendar/list';
import {getAction} from '@/api/manage'
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"
export default {
  components:{
    'HomeNav': () => import('@/components/layouts/HomeNav'),
    FullCalendar
  },
  data () {
    return {
      url:{
        getCalendarpageData:'/home/getCalendarpageData'
      },
      userinfo:{
          info:this.$store.getters.userInfo,
          module:'calendar',
          badgecount:''
      },
      startTime:'',
      endTime:'',
      calendarOptions: {
        default: 'standard',
        locale: zhCn,
        plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin ],
        initialView: 'dayGridMonth',
        // dateClick: this.handleDateClick,
        eventClick:this.eventClick,
        events: (start,end,callback)=>{
          this.startTime=start.startStr.split('T')[0]
          this.endTime=start.endStr.split('T')[0]
          let events=this.initCalendarData(this.startTime,this.endTime)
          return events
        },
        defaultAllDay:false,
        // events: [
        //     {
        //         title  : 'event1',
        //         start  : '2021-07-01',
        //         end:'2021-07-02',
        //         // backgroundColor:'black',
        //         eventTextColor:'green'
        //     },
        //     {
        //         title  : 'event2',
        //         start  : '2021-07-05',
        //         end    : '2021-07-07',
        //         url:'www.baidu.com',
        //         backgroundColor:'red'
        //     },
        //     {
        //         title  : 'event3',
        //         start  : '2021-07-09 12:30:00',
        //         allDay : false, // will make the time show
        //         backgroundColor:'purple'
        //     }
        // ],
        dayMaxEventRows: true, // for all non-TimeGrid views
        views: {
          timeGrid: {
            dayMaxEventRows: 5,
          },
        },
        weekends: true,
        // contentHeight:500,
        aspectRatio:2,
        handleWindowResize:true,
        lazyFetching : true,
        headerToolbar: {
          left: 'today prev,next', // will normally be on the left. if RTL, will be on the right
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay', // will normally be on the right. if RTL, will be on the left
        },
      },
    }
  },
  mounted () {
    // this.initCalendarData(this.startTime,this.endTime)
  },
  methods: {
    initCalendarData(start,end){
      let events=getAction(this.url.getCalendarpageData,{startDate:start,endDate:end}).then(res=>{
        this.userinfo.badgecount=res.result.length||''
        return res.result.map((i)=>{
          if(!i.type){
            i.url=this.HTE_OLD_SERVER_URL+`${i.url}bootToken=${Vue.ls.get(ACCESS_TOKEN)}${i.params}`
            return i
          }else{
            return i
          }
        })
      })
      return events;
    },
    eventClick( info){
      info.jsEvent.preventDefault();
     
      if (info.event.url) {
        if(info.event.url.indexOf('bootToken=')<0){
          if(["合同待报工"].indexOf(info.event.title)>-1){
            this.$router.push(info.event.url)
          }else{
            let urlJump = this.$router.resolve({ path: info.event.url })
            window.open(urlJump.href, '_blank')
          }
          
        }else{
          window.open(info.event.url);
        }
      }
    },
    handleDateClick(arg) {
        if (confirm('您是否要在' + arg.dateStr + '添加一个新的事件?')) {
            this.calendarEvents.push({ // add new event data
              title: '新的事件',
              start: arg.date,
              allDay: arg.allDay
            })
        }
    },
  },
};
</script>
<style lang="less" scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
.canlendar-box{
  padding: 30px 70px 0;
  border-top: 1px solid #dddddd;
  .fullcalendar{
    /deep/ .fc-header-toolbar .fc-toolbar-chunk .fc-button-group .fc-button-primary{
      color: #000;
      background-color: #fff;
    }
    /deep/ .fc-header-toolbar .fc-toolbar-chunk .fc-button-group .fc-button-primary.fc-button-active{
      color: #fff;
      background-color: #000;
    }
    /deep/ .fc-daygrid-body  .fc-daygrid-more-link{
      text-decoration: underline;
      text-align: right;
      display: inline-block;
      width: 100%;
    }
  }
}
</style>
